<template>
  <div class="product-list">
    <div
      class="product-info"
      v-for="(item, index) in products"
      :key="item.id"
      @click="lookDetail(item.id)"
    >
      <p>{{ index + 1 }} - {{ item.name }}</p>
      <p>价格:{{ item.price }}</p>
      <p>描述：{{ item.dec }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProductList",
  props: {
    products: {
      type: Array,
    },
  },
  methods: {
    lookDetail(productId) {
      console.log(productId);
      this.$router.push({
        name: "productDetail",
        params: {
          productId,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.product-list {
  width: 300px;
  height: auto;
  .product-info {
    width: 300px;
    border: 1px solid purple;
  }
}
</style>